<template>
  <div class="edit">
    <div class="content">
      <div class="head"><span>编辑</span></div>
      <table class="smallTable">
        <tr>
          <td><span class="banben">版本号</span></td>
          <td>
            <span>{{ appEdition }}</span>
          </td>
        </tr>
          <tr>
            <td><span class="info"> 文件类型</span></td>
            <td>
              <el-select v-model="appType" placeholder="请选择">
                <el-option
                  v-for="item in appTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="gap"></td>
          </tr>
          <tr>
            <td><span class="info"> 强制更新</span></td>
            <td>
              <el-select v-model="forceUpdate" placeholder="请选择">
                <el-option
                  v-for="item in forceUpdateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="gap"></td>
          </tr>
          <tr>
        <tr>
          <td><span class="info"> 版本信息</span></td>
          <td>
            <el-input
              type="textarea"
              placeholder="请输入版本信息"
              v-model="appInfo"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </td>
        </tr>
        <tr>
          <td><span class="info">安装包</span></td>
          <td>
            <div class="package">
              <div class="border-top"></div>
              <div class="border-left"></div>
              <div class="border-bottom"></div>
              <div class="border-right"></div>

              <div class="button-wrapper"></div>
              <div
                  @dragover="fileDragover"
                  @drop="fileDrop"
                  class="upload flex-column flex-start"
                >
                  <input
                    type="file"
                    id="upload"
                    ref="upload"
                    @change="change"
                  />
                  <div class="pic">
                    <img
                      v-if="complete === false"
                      src="@/assets/upload.png"
                      alt=""
                    />
                    <img class="file" v-else src="@/assets/file.png" alt="" />
                    <img
                      v-if="complete === true"
                      @click="deleteFile"
                      class="close"
                      src="@/assets/closeFile.png"
                      alt=""
                    />
                  </div>

                  <div v-if="complete === false">
                    将安装包拖到此处这,或<span class="blue cp" @click="upload"
                      >点击上传</span
                    >
                  </div>
                  <div v-else>
                    {{ fileName }}
                  </div>
                  <div v-if="loading === true" class="loading-box">
                    <div
                      class="current-loading"
                      :style="{ width: percent + '%' }"
                    ></div>
                  </div>
                </div>
            </div>
          </td>
        </tr>
      </table>
      <div class="btn-blue2" @click="shelves">上架</div>
    </div>
  </div>
</template>

<script>
import { upload } from '@/api/serviceManage'

export default {
  data () {
    return {
      text: '',
      appEdition: window.sessionStorage.getItem('appEdition'),
      appInfo: window.sessionStorage.getItem('appInfo'),
      appId: window.sessionStorage.getItem('appId'),
      // file: false,
      // fileName: '',
      percent: 0,
      // uploadState: false, // 上传状态
      loading: false,
      complete: true,
      appType: sessionStorage.getItem('appType'), // 文件类型
      appTypeOptions: [
        // 文件类型选择
        { label: 'IOS', value: 'IOS' },
        { label: 'Android', value: 'Android' }
      ],
      forceUpdate: sessionStorage.getItem('forceUpdate'), // 是否强制更新
      forceUpdateOptions: [{ label: '是' }, { label: '否' }],
      fileId: window.sessionStorage.getItem('fileId'),
      fileName: window.sessionStorage.getItem('fileName')
      // errMsg: ''
    }
  },
  computed: {

  },
  created () {

  },
  methods: {
    upload () {
      this.$refs.upload.click()
      // // console.log(this.$refs.upload.value)
    },
    // 点击上传
    change () {
      const formData = new FormData()
      formData.append('file', this.$refs.upload.files[0])
      // console.log(formData)
      // console.log(this.$refs.upload.files[0])
      if (this.$refs.upload.files[0].type === 'application/vnd.android.package-archive') {
        upload
          .uploadFile(formData, (progressEvent) => {
            const completeVal =
            (progressEvent.loaded / progressEvent.total) * 100 || 0
            this.percent = completeVal
            this.loading = true
          })
          .then((res) => {
            if (res.data.code === 200) {
              // console.log(res.data.data)
              this.fileId = res.data.data
              this.percent = 100
              this.loading = false
              this.complete = true
              this.fileName = this.$refs.upload.files[0].name
            } else {
              alert('上传失败')
              this.loading = false
              this.complete = false
              this.fileName = ''
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '只能上传apk文件',
          duration: 1000
        })
      }
    },
    deleteFile () {
      this.complete = false
      this.$refs.upload.value = ''
      this.fileId = null
      this.fileName = ''
    },
    fileDragover (e) {
      e.preventDefault()
    },
    // 拖拽上传
    fileDrop (e) {
      e.preventDefault()
      const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象
      // console.log(file)
      if (!file) return
      if (!file) return
      if (file.type === 'application/vnd.android.package-archive') {
        const formData = new FormData()
        formData.append('file', file)
        // console.log(formData)
        upload.uploadFile(formData, (progressEvent) => {
          const completeVal =
            (progressEvent.loaded / progressEvent.total) * 100 || 0
          this.percent = completeVal
          // this.uploadState = false
          this.loading = true
        })
          .then((res) => {
            if (res.data.code === 200) {
              // console.log(res.data.data)
              this.fileId = res.data.data
              this.percent = 100
              // this.uploadState = true
              // this.filePath = res.data.resultBody.filePath
              this.loading = false
              this.complete = true
              this.fileName = file.name
            } else {
              this.$message({
                type: 'error',
                message: '上传失败',
                duration: 1000
              })
              this.loading = false
              this.complete = false
              this.fileName = ''
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '只能上传apk文件',
          duration: 1000
        })
      }
    },
    // 上架
    shelves () {
      console.log(this.appId, this.fileId, this.appInfo, this.appType, this.forceUpdate)
      if (this.this.appType === 'IOS') {
        if (this.appEdition !== null) {
          this.$store.dispatch('serviceSetting/updateAppData', { appId: Number(this.appId), fileId: Number(this.fileId), appInfo: this.appInfo, appType: this.appType, forceUpdate: this.forceUpdate }).then(res => {
          // console.log(res)
            this.$message({
              type: 'success',
              message: res.message,
              duration: 1000
            })
            this.$router.push('/serviceManage/appList')
          }).catch(res => {
            this.$message({
              type: 'error',
              message: res,
              duration: 1000
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '版本号不能为空',
            duration: 1000
          })
        }
      } else {
        if (this.appEdition !== null && this.fileId !== null) {
          this.$store.dispatch('serviceSetting/updateAppData', { appId: Number(this.appId), fileId: Number(this.fileId), appInfo: this.appInfo, appType: this.appType, forceUpdate: this.forceUpdate }).then(res => {
          // console.log(res)
            this.$message({
              type: 'success',
              message: res.message,
              duration: 1000
            })
            this.$router.push('/serviceManage/appList')
          }).catch(res => {
            this.$message({
              type: 'error',
              message: res,
              duration: 1000
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '版本号和安装包不能为空',
            duration: 1000
          })
        }
      }

      // console.log(this.appEdition, this.appInfo, this.fileId, this.fileName)
    }

  }
}
</script>

<style lang="scss" scoped>
.content {
  // margin-top: 20px;
  width: 100%;
  min-height: 934px;
  background-color: #fff;
  padding: 0 24px;
  .head {
    width: 100%;
    height: 78px;
    border-bottom: 1px solid #e6e9f0;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: #1b1f35;
    span {
      position: absolute;
      bottom: 20px;
    }
  }
  .smallTable {
    margin-top: 32px;
    tr,
    td {
      &:nth-child(1) {
        width: 83px;
        text-align: right;
        vertical-align: top;
      }
      &:nth-child(2) {
        width: 330px;
        padding-left: 12px;
        text-align: left;
      }
      .info {
        display: inline-block;
        width: 83px;
        height: 36px;
        color: #3d4966;
        line-height: 36px;
        text-align: right;
        white-space: nowrap;
      }
    }
    .banben {
      display: inline-block;

      margin-bottom: 20px;
    }
    /deep/ .el-textarea .el-textarea__inner {
      width: 330px;
      height: 164px;
      //   margin-top: 8px;

      margin-bottom: 20px;
      resize: none;
      outline: none;
    }
    /deep/ .el-textarea .el-input__count {
      z-index: 999;
      bottom: 30px;
      right: 30px;
      background: none;

    }
        /deep/ .el-select {
      width: 100%;
    }
    .gap{
      padding: 10px;
    }
    .package {
      // margin-top: 20px;
      position: relative;

      width: 327px;
      height: 227px;
      background: #ccc;
      z-index: 9999;
      border-radius: 5px;
      .border-top {
        width: calc(100% - 10px);
        left: 5px;
        height: 1px;
        background-image: linear-gradient(
          to right,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 20px 1px;
        background-repeat: repeat-x;
        position: absolute;
      }

      .border-left {
        width: 1px;
        left: 0;
        top: 5px;
        height: calc(100% - 10px);
        background-image: linear-gradient(
          to top,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 1px 20px;
        background-repeat: repeat-y;
        position: absolute;
      }

      .border-bottom {
        width: calc(100% - 10px);
        left: 5px;
        height: 1px;
        bottom: 0;
        background-image: linear-gradient(
          to right,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 20px 1px;
        background-repeat: repeat-x;
        position: absolute;
      }

      .border-right {
        width: 1px;
        right: 0;
        top: 5px;
        height: calc(100% - 10px);
        background-image: linear-gradient(
          to top,
          #fff 0%,
          #fff 50%,
          transparent 50%
        );
        background-size: 1px 20px;
        background-repeat: repeat-y;
        position: absolute;
      }
      .button-wrapper {
        position: relative;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        border-radius: 4px;
        background: #ffffff;
        top: 1px;
        left: 1px;
      }
      .upload {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .pic {
          width: 110px;
          height: 110px;
          position: relative;
          .close {
            position: absolute;
            width: 24px;
            height: 24px;
            right: -10px;
            top: -10px;
          }
          .file {
            background-color: #f2f4f8;
          }
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .btn-blue2 {
    margin-left: 88px;
    margin-top: 169px;
    width: 100px;
  }
  #upload {
    display: none;
  }
  .loading-box {
    // margin-top: 15px;
    // float: left;
    width: 110px;
    height: 10px;
    background-color: #a5aebf;
    border-radius: 5px;
    // margin-left: 15px;

    .current-loading {
      height: 10px;
      border-radius: 5px;
      background-color: #304eec;
      /*width: 50%;*/
    }
  }
}
</style>
